<template>
	<view class="sheet-detail">
		<u-navbar title="工单详情" :is-back="true">
			<view slot="right" @click="moreOperation">更多</view>
		</u-navbar>
		<view class="sheet-detail-content">
			<view>
				<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="true"
					swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="flex:1;">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<detail-tab :sheetOrderNo="sheetOrder"></detail-tab>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<work-flow-tab></work-flow-tab>
					</scroll-view>
					
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<addition-info-tab style="height: 100%;"></addition-info-tab>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom-operation">
			<u-button v-if="sheetDetail.state==0"  class="btn-resolve" type="primary" style="flex: 1;" @click="toResolveConfirm">我来受理</u-button>
			<view v-if="sheetDetail.state==1" class="operation-unrepair" style="width: 100%;">
				<u-button style="flex: 1;" type="primary" @click="toEditAddition">补充</u-button>
				<u-button v-if="current!=2" style="flex: 1;margin-left: 40rpx;" type="primary" @click="repairConfirm">修好了</u-button>
			</view>
			<view v-if="sheetDetail.state==2" class="operation-unrepair" style="width: 100%;">
				<u-button style="flex: 1;" type="primary" @click="toEditAddition">补充</u-button>
			</view>
		</view>
		<u-popup v-model="actionShow" mode="bottom" height="300rpx">
			<view v-if="sheetDetail.state==0" class="more-action">
				<view class="action-item" @click="toCancel">
					<icon-text iconPath="order" :iconPosition="0" iconText="撤销该报修"></icon-text>
				</view>
				<view class="action-item" @click="toEdit">
					<icon-text iconPath="order" :iconPosition="0" iconText="更改内容"></icon-text>
				</view>
			</view>
			<view v-if="sheetDetail.state==1" class="more-action">
				<view class="action-item" @click="toEdit">
					<icon-text iconPath="order" :iconPosition="0" iconText="更改内容"></icon-text>
				</view>
				<view class="action-item" @click="toRepairHistory">
					<icon-text iconPath="order" :iconPosition="0" iconText="历史维修"></icon-text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="editShow" mode="bottom" height="800rpx">
			<view class="sheet-edit">
				<detail-edit></detail-edit>
			</view>
		</u-popup>
		<u-modal v-model="repairConfirmShow" title="提示" content="是否确认修好了" :mask-close-able="true" @confirm="onRepairConfirm" :show-cancel-button="true"></u-modal>
	</view>

</template>

<script>
	import iconText from '@/components/icon-text.vue'
	import additionInfoTab from './components/addition-info-tab.vue'
	import detailTab from './components/detail-tab.vue'
	import workFlowTab from './components/work-flow-tab.vue'
	import detailEdit from './components/detail-edit.vue'
	export default{
		components:{
			detailTab,
			additionInfoTab,
			workFlowTab,
			iconText,
			detailEdit
		},
		data(){
			return{
				repairConfirmShow:false,
				tabList:[{name:'报修详情'},{name:'流转信息'},{name:'补充信息'}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current:0,
				swiperCurrent:0,
				sheetOrder:11,
				sheetDetail:{
					state:0,  //0 待处理 1 待维修 2 已维修 3待审核 4已完成
				},
				actionShow:false,
				editShow:false,
			}
		},
		onLoad(options){
			if(options.state){
				this.sheetDetail.state = options.state
			}
		},
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			},
			//受理确认
			toResolveConfirm(){
				this.$u.route('/pages/deviceWorkSheet/resolveConfirm/index')
			},
			//编辑报修
			toEditAddition(){
				this.$u.route('/pages/deviceWorkSheet/additionEdit/index')
			},
			//已修复确认
			onRepairConfirm(){
				
			},
			//已修好
			repairConfirm(){
				this.repairConfirmShow = true
			},
			//更多
			moreOperation(){
				this.actionShow = true
			},
			//工单编辑
			toEdit(){
				this.actionShow = false
				this.editShow = true
			},
			//报修工单取消
			toCancel(){
				this.actionShow = false
				this.$u.route('/pages/deviceWorkSheet/cancelReport/index',{workSheetId:111})
			},
			//维修历史
			toRepairHistory(){
				this.actionShow = false
				this.$u.route('/pages/deviceWorkSheet/repairHistory/index')
			}
		}
	}
</script>

<style scoped lang="scss">
	.sheet-detail{
		height: calc(100vh);
		.sheet-detail-content{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: calc(100vh - 100rpx);
			.swiper-item{
				height: 100%;
			}
		}
		.bottom-operation{
			position: fixed;
			bottom:env(safe-area-inset-bottom);
			left: 0;
			right:0;
			height: 100rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			.operation-unrepair{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 0rpx 30rpx;
				align-items: center;
			}
		}
	}
	.more-action{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.action-item{
			width: 100%;
			padding: 30rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
</style>
